import React, { memo } from 'react';
import MainLayout from '@/components/layout/MainLayout';
import HeroCarousel from '@/components/hero/HeroCarousel';
import ArtworkCard from '@/components/works/ArtworkCard';
import { IArtwork } from '@/types/artwork';
import { BUTTON_STYLES, LAYOUT_STYLES } from '@/constants/styles';
import { CATEGORIES } from '@/constants/navigation';
import artworks from '@/data/works.json';

const Home: React.FC = () => {
  // 筛选出推荐作品
  const featuredWorks = artworks.filter((work) => work.featured) as IArtwork[];
  
  // 获取所有作品（这里使用模拟数据）
  const allWorks = artworks as IArtwork[];

  return (
    <MainLayout>
      {/* 英雄轮播区 */}
      <section className="relative">
        <HeroCarousel featuredWorks={featuredWorks} />
      </section>

      {/* 网站简介 */}
      <section className={`${LAYOUT_STYLES.section} bg-white`}>
        <div className={LAYOUT_STYLES.container}>
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 text-ink">墨韵斋</h2>
            <p className="text-lg text-ink-light mb-8 leading-relaxed">
              墨韵斋致力于传承和弘扬中国传统书画艺术，展示当代优秀书画家的精品力作。我们相信，艺术是人类精神的寄托，是文化传承的重要载体。通过线上画廊，我们希望让更多的人欣赏到中国传统书画的魅力。
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-4">
              <a href="/gallery" className={BUTTON_STYLES.primary}>
                浏览画廊
              </a>
              <a href="/about" className={BUTTON_STYLES.secondary}>
                了解更多
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* 精选作品区 */}
      <section className={`${LAYOUT_STYLES.section} bg-paper`}>
        <div className={LAYOUT_STYLES.container}>
          <div className={LAYOUT_STYLES.sectionHeader}>
            <h2 className={LAYOUT_STYLES.sectionTitle}>精选作品</h2>
            <div className={LAYOUT_STYLES.sectionDivider}></div>
          </div>

          {/* 使用网格布局展示作品 */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {allWorks.map((work) => (
              <ArtworkCard key={work.id} work={work} />
            ))}
          </div>

          {/* 查看更多按钮 */}
          <div className="text-center mt-12">
            <a href="/gallery" className={`inline-flex items-center ${BUTTON_STYLES.ghost}`}>
              查看更多作品
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </a>
          </div>
        </div>
      </section>

      {/* 分类浏览区 */}
      <section className={`${LAYOUT_STYLES.section} bg-white`}>
        <div className={LAYOUT_STYLES.container}>
          <div className={LAYOUT_STYLES.sectionHeader}>
            <h2 className={LAYOUT_STYLES.sectionTitle}>按分类浏览</h2>
            <div className={LAYOUT_STYLES.sectionDivider}></div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {CATEGORIES.map((category) => (
              <div key={category.key} className="group relative overflow-hidden rounded-sm shadow-md aspect-[4/3]">
                <div className="absolute inset-0 bg-gradient-to-br from-paper-dark to-paper flex items-center justify-center">
                  <p className="text-ink-light text-xl font-medium">{category.label}</p>
                </div>
                <div className="absolute inset-0 bg-ink/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                  <a href={category.href} className="text-white text-xl font-medium px-6 py-3 border border-white hover:bg-white hover:text-ink transition-colors duration-300">
                    浏览{category.key}
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </MainLayout>
  );
};

export default memo(Home);